<template>
  <view class="add-area">
    <view class="section-box">
      <view class="section-title">
        <view class="title">区域信息</view>
      </view>
      <view class="form-box">
        <view class="form-item">
          <view class="item-label">区域名称</view>
          <view class="item-content">
            <input :disabled="!enableEdit" placeholder="请输入区域名称" v-model="areaName" maxlength="20" />
          </view>
        </view>
<!--        <view class="form-item">-->
<!--          <view class="item-label">网关编号</view>-->
<!--          <view class="item-content">-->
<!--            <view class="item-content"><input placeholder="请输入网关编号" type="number" v-model="gatewayNumber"/></view>-->
<!--            <i class="operate-icon iconfont icon-scan" @click="scanQR()"/>-->
<!--          </view>-->
<!--        </view>-->
        <view class="form-item picture">
          <view class="item-label">区域照片</view>
          <view class="item-content">
            <view class="item-content">
              <view v-if="!previewPath" class="add-file" @click="chooseFile()"><view class="iconfont icon-add"></view></view>
              <view v-else class="file-preview">
                <view v-if="enableEdit" class="delete-file" @click="clearFile()"><view class="iconfont icon-close"></view></view>
                <image class="preview-picture" :src="previewPath" mode="aspectFill" @click="previewImg()"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <cover-view v-if="enableEdit" class="page-bottom-btn" @click="saveAction()">保存</cover-view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import { getParamByQr, getImagePath } from '@/utils/index.js'
export default {
  mixins: [mixin],
  data() {
    return {
      areaName: '',
      gatewayNumber: '',
      tempFilePath: '',
      filePath: '',
      previewPath: '',
      enableEdit: false
    }
  },
  mounted() {
    this.enableEdit = this.params.canEdit === 'true'
    if (this.params.areaId) {
      uni.setNavigationBarTitle({
        title: '编辑区域'
      })
      this.getAreaInfo()
    } else {
      uni.setNavigationBarTitle({
        title: '新增区域'
      })
    }
  },
  methods: {
    getAreaInfo() {
      const self = this
      uni.request({
        url: '/project_area/get',
        data: {
          id: self.params.areaId
        },
        success(result) {
          if (result.data.success && result.data.data) {
            self.areaName = result.data.data.name || ''
            self.gatewayNumber = result.data.data.gateway || ''
            self.filePath = result.data.data.pic || ''
            self.previewPath = getImagePath(self.filePath)
          }
        }
      })
    },
    scanQR() {
      const self = this
      uni.scanCode({
        scanType: ['qrCode'],
        success(res) {
          console.log(res)
          self.gatewayNumber = getParamByQr(res.result, 'gw')
        },
        fail(e) {
          if (!e.errMsg?.includes('cancel')) {
            uni.showToast({
              icon: 'none',
              title: '无效的二维码'
            })
          }
        }
      });
    },
    checkCanSubmit() {
      const self = this
      self.areaName = `${self.areaName}`.trim()
      if (!self.areaName) {
        uni.showToast({
          icon: 'none',
          title: '请输入区域名称'
        })
        return false
      }
      return true
    },
    saveAction() {
      const self = this
      if (!this.enableEdit) return
      if (self.tempFilePath) {
        self.uploadFile(self.tempFilePath, self.save)
      } else {
        self.save()
      }
    },
    save() {
      const self = this
      if (self.params.areaId) {
        this.editArea()
      } else {
        this.addArea()
      }
    },
    chooseFile() {
      const self = this
      if (!this.enableEdit) return
      uni.chooseImage({
        count: 1,
        success(result) {
          console.log('choose file', result)
          const tempPath = result.tempFilePaths[0] || ''
          self.tempFilePath = tempPath
          self.previewPath = tempPath
        }
      })
    },
    clearFile() {
      this.tempFilePath = ''
      this.previewPath = ''
      this.filePath = ''
    },
    previewImg() {
      uni.previewImage({
        urls: [this.previewPath]
      })
    },
    uploadFile(filePath, callback) {
      const self = this
      uni.uploadFile({
        url: '/sys/upload',
        filePath,
        name: 'file',
        success(result) {
          if (result.data.url) {
            self.filePath = result.data.url
            if (callback instanceof Function) {
              callback()
            }
          }
        }
      })
    },
    addArea() {
      const self = this
      if (!self.checkCanSubmit()) return
      uni.request({
        url: '/project_area/add',
        data: {
          xm_id: self.params.projectId,
          name: self.areaName,
          // gateway: self.gatewayNumber,
          pic: self.filePath
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        }
      })
    },
    editArea() {
      const self = this
      if (!self.checkCanSubmit()) return
      uni.request({
        url: '/project_area/modify',
        data: {
          id: self.params.areaId,
          xm_id: self.params.projectId,
          name: self.areaName,
          // gateway: self.gatewayNumber,
          pic: self.filePath
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        }
      })
    },
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped lang="scss">
.add-area {
  padding: 30rpx 30rpx 130rpx;
}
.section-box {
  background-color: $white;
  border-radius: 10rpx;
  padding: 30rpx 30rpx 0;
  margin-bottom: 20rpx;
}
.section-title {
  @include section-title;
}
.form-box {
  .form-item {
    min-height: 100rpx;
    border-top: 2rpx solid $border-base;
    padding: 20rpx 50rpx 20rpx 150rpx;
    position: relative;
    display: flex;
    align-items: center;
    &:first-child {
      border-top: 0;
    }
    .item-label {
      position: absolute;
      left: 0;
      font-size: $font-size-3;
    }
    .item-content {
      text-align: right;
      width: 100%;
      font-size: $font-size-2;
      display: flex;
      justify-content: flex-end;
      &.placeholder {
        color: $text-placeholder;
      }
    }
    .operate-icon {
      position: absolute;
      right: 0;
      top: 30rpx;
      font-size: $font-size-6;
      color: $primary;
      &.location {
        color: $success;
      }
      &:after {
        position: absolute;
        content: '';
        display: block;
        left: -10rpx;
        right: -10rpx;
        top: -10rpx;
        bottom: -10rpx;
      }
    }
  }
}
.add-file {
  width: 335rpx;
  height: 250rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  border: 2rpx dashed $border-base;
  font-size: 48rpx;
  color: $text-base;
}
.file-preview {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  .delete-file {
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    top: 0;
    right: 0;
    color: $white;
    background-color: $danger;
    font-size: $font-size-4;
    &:after {
      content: '';
      display: block;
      position: absolute;
      left: -10rpx;
      right: -10rpx;
      top: -10rpx;
      bottom: -10rpx;
    }
  }
  .preview-picture {
    display: block;
    width: 335rpx;
    height: 250rpx;
  }
}
</style>
